<template>
  <div class="home">
    <!--    标题-->
    <div class="h-title">
      <van-nav-bar fixed="fixed" title="智慧商城" />
    </div>
    <!--    搜索栏-->
    <div class="h-search">
      <van-search
        background="#F1F1F3"
        placeholder="请在此输入搜索关键词"
        shape="round"
        @click="$router.push('/search')"
      />
    </div>
    <!--    轮播图-->
    <div class="h-swipe">
      <van-swipe :autoplay="2000" class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swipeList" :key="index"
          ><img :src="item.imgUrl" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--    导航组-->
    <div class="h-grid">
      <van-grid :column-num="5" icon-size="40px">
        <van-grid-item
          v-for="(item, index) in gridList"
          :key="index"
          :icon="item.imgUrl"
          :text="item.text"
        />
      </van-grid>
    </div>
    <!--    图片-->
    <div class="h-photo">
      <img :src="photoUrl.imgUrl" alt="" width="100%" />
    </div>
    <!--    文字-->
    <div id="textUrl">{{ textUrl }}</div>
    <!--    商品-->
    <div>
      <goods-list
        v-for="(item, index) in goodsList"
        :key="index"
        :item="item"
      ></goods-list>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import { getHome } from '@/api/home'
import GoodsList from '@/components/goodsList.vue'

export default {
  name: 'homeCom',
  // import引入的组件需要注入到对象中才能使用",
  components: { GoodsList },
  data () {
    // 这里存放数据",
    return {
      swipeList: [], // 轮播
      gridList: [], // 导航组
      photoUrl: '', // 图片
      textUrl: '', // 富文本
      goodsList: [] // 商品
    }
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  async created () {
    const {
      data: {
        data: { pageData }
      }
    } = await getHome()
    this.swipeList = pageData.items[1].data
    this.gridList = pageData.items[3].data
    this.photoUrl = pageData.items[4].data[0]
    this.textUrl = pageData.items[5].params.content
    document.getElementById('textUrl').innerHTML = this.textUrl
    this.goodsList = pageData.items[6].data
  }
}
</script>
<style lang="less">
.home {
  .h-title {
    .van-nav-bar__content {
      background-color: #c31401;

      .van-nav-bar__title {
        color: white;
      }
    }
  }

  .h-search {
    margin-top: 45px;
  }
}
</style>
